

import React from 'react'
import { Card } from 'antd';
import moment from 'moment';
import "./VideoCard.scss";
const { Meta } = Card;


function VideoCard({videoId,videoName,coverURL,views,handleClick,time}) {
  return (
    <div className='VideoCard-container' onClick={()=>{handleClick(videoId)}}>
        <Card
            hoverable
            style={{ width: 240 }}
            cover={<img alt="cover" src={coverURL} />}
        >
            <Meta title={videoName} description={moment(time).format('YYYY-MM-DD HH:mm:ss')}/>
            <Meta description={"viewers🤹🏻‍♂️: " + views}></Meta>
        </Card>
    </div>
  )
}


const MemoVideoCard = React.memo(VideoCard);
export default MemoVideoCard;